<template>
<div class="topBanner">
    <swiper :options="swiperOption"  ref="mySwiper" class="swiper-box">  
        <swiper-slide v-for="item in tabBanner" :key="item.id" class="swiper-item"> 
            <img :src="item.picture||item.pic">
        </swiper-slide>  
        <div class="swiper-pagination" slot="pagination"></div>  
    </swiper> 
</div> 
</template>
<script>
export default {
  props: {
    tabBanner: {
      type: [Array],
      default: ""
    }
  },
  data() {
    return {
      swiperOption: {
        autoplay: 3500,
        // setWrapperSize: true,
        pagination: ".swiper-pagination",
        paginationClickable: true,
        // mousewheelControl: true,
        // observeParents: true,
        loop: true
      }
    };
  }
};
</script>
<style lang="less">
.topBanner {
  height: 3rem;
  .swiper-box {
    height: 3rem;
    .swiper-wrapper {
      .swiper-item {
        img {
          width: 7.5rem;
          height: 3rem;
          // width: 100%;
        }
      }
    }
    .swiper-pagination {
      .swiper-pagination-bullet {
        display: inline-block;
        border-radius: 100%;
        background: #000;
        opacity: 0.5;
      }
      .swiper-pagination-bullet-active {
        display: inline-block;
        border-radius: 100%;
        background-color: #fff;
      }
    }
  }
}
</style>
